<template>
  <narrow>
    <div class="login">
      <h1 class="login-title">登录</h1>
      <div class="login-form">
        <!-- 用户名 -->
        <div class="form-group">
          <input class="form-control" type="text" v-model.lazy="userName" placeholder="请输入用户名" />
        </div>
        <!-- 密码 -->
        <div class="form-group">
          <input class="form-control" type="password" v-model.lazy="password" placeholder="请输入密码" />
        </div>
      </div>
      <!-- 注册按钮 -->
      <div class="submit-group">
        <button class="submit-btn btn-primary btn" @click="submitLogin">登录</button>
        <router-link class="common-a" to="/register">注册账号>></router-link>
      </div>
    </div>
  </narrow>
</template>
<script>
import Narrow from 'components/common/Narrow'
import { login } from 'api/user'
export default {
  name: 'login',
  components: {
    Narrow
  },
  data () {
    return {
      isLogin: false,
      userName: '',
      password: ''
    }
  },
  methods: {
    /**
     * 提交登录
     * @method submitLogin
     */
    async submitLogin () {
      let userInfo = {
        userName: this.userName,
        password: this.password
      }
      // 发起请求
      let result = await login(userInfo)
      if (result.errno === 0) {
        alert('登录成功')
        this.$router.push('/')
      } else {
        alert(result.message)
      }
    }
  },
  created () {

  }
}
</script>
<style lang="scss" scoped>
@import '~styles/common';
.login{
  .login-title{
    font-size: 40px;
    font-weight: 400;
    line-height: 1.5;
  }
  .common-a{
    margin-left: 10px;
  }
}
</style>
